<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="`添加账户`" :autoBack="true" leftIconColor="$uni-text-color"
    :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

    <view class="container"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">

      <!-- 表单盒子 -->
      <view class="form_box area">
        <scroll-view scroll-y :enable-back-to-top="true" class="comprehensive">
          <!-- 表单结构 -->
          <uni-forms ref="relRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind" labelWidth="120">
            <uni-forms-item name="realName" label="姓名：" required>
              <uni-easyinput placeholder="请输入姓名" v-model="state.formData.realName" :inputBorder="false">
              </uni-easyinput>
            </uni-forms-item>
            <uni-forms-item name="contactWay" label="手机号：" required>
              <uni-easyinput placeholder="请输入手机号" v-model="state.formData.contactWay" :inputBorder="false">
              </uni-easyinput>
            </uni-forms-item>
            <uni-forms-item name="payment_type" label="类型：" required>
              <uni-data-checkbox :disabled=" options_type ?true:false"  v-model="state.formData.payment_type" placeholder="请选择类型"
              :localdata="state.formData.payment_type_list" @change="change" />
            </uni-forms-item>
            <view v-if="changeshow == true">
              <uni-forms-item name="identityCard" label="身份证号：" required>
                <uni-easyinput placeholder="请输入身份证号" v-model="state.formData.identityCard" :inputBorder="false">
                </uni-easyinput>
              </uni-forms-item>
              <uni-forms-item name="bankName" label="开户银行：" required>
                <uni-easyinput @tap="choosebankName" :disabled="true" placeholder="请输入开户银行"
                  v-model="state.formData.bankName" :inputBorder="false">
                </uni-easyinput>
              </uni-forms-item>
              <uni-forms-item name="bankCode" label="银行卡号：" required>
                <uni-easyinput placeholder="请输入银行卡号" v-model="state.formData.bankCode" :inputBorder="false">
                </uni-easyinput>
              </uni-forms-item>

              <uni-forms-item name="bank_branch" label="开户支行：" required>
                <uni-easyinput placeholder="请输入开户支行" v-model="state.formData.bank_branch" :inputBorder="false">
                </uni-easyinput>
              </uni-forms-item>
          </view>
          </uni-forms>

        </scroll-view>
      </view>

    </view>

  </s-layout>
  <!-- 底部提交按钮 -->
  <view v-if="!editid">
    <s-button @netWork="submitForm" :text="text"></s-button>
  </view>

  <view v-else class="edit_button">
    <button class="del" @tap="deletesubmit">删除</button>
    <button class="edit" @tap="editsubmit">保存修改</button>
  </view>
  <!-- 底部弹出选择银行卡 -->
  <!-- 银行卡分类 -->
  <s-popup-list @selectedData="bankSwitchTitle" :current_page="bankCurrentPage" :last_page="bankLastPage"
    :skipPage="'/subpackage/staff/workbench/returned_info/returned_info_add'" @subcomponentSearch="subcomponentSearch"
    @pageEvent="pageBankEvent" :arrayList="bankDataList" ref="popupbankListRef" :popupTitle="'选择银行卡'"
    :listingName="'银行卡名称'" :showGoLink="'#'" :isBank="true"></s-popup-list>
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import { realName, identityCard, contactWay,bankName,bankCode,bank_branch,payment_type } from '@/sheep/validate/form';
const { safeAreaInsets } = uni.getSystemInfoSync();
const text = ref("提交");
const state = reactive({
  formData: {
    realName: '',
    identityCard: '',
    contactWay: '',
    bankName:'',
    bankCode:'',
    bank_branch:'',
    weigh:'',
    payment_type:'bank',
    payment_type_list: [
			{ value: 'bank', text: "银行卡" },
			{ value: 'alipay', text: "支付宝" },
      // { value: 'wechat', text: "微信" },
		]

  },
  rules: {
    realName,
    identityCard,
    contactWay,
    bankName,
    bankCode,
    bank_branch,
    payment_type,
  },
});
const changeshow = ref(true)
function change(e) {
  if(e.detail.value == 'bank'){
    changeshow.value = true
    
  }else{
    changeshow.value = false
  }
  state.formData.payment_type = e.detail.value
}

const  editid = ref('')
const options_type = ref()
onLoad((options)=>{
  editid.value = options.ids
  options_type.value = options.type
  bankpopList()
  if (editid.value) { 
    getDetailList()
    state.formData.payment_type = options.type
    if(options.type == 'alipay'){
      changeshow.value = false
    }
   
  }
  
})
//详情接口
const getDetailList = ()=>{
  let parpam = {
    ids: editid.value 
  }
  sheep.$api.returned_info.getReturnedView(parpam).then((res) => {
     state.formData.realName =res.data.name 
    state.formData.identityCard =res.data.identity_id
    state.formData.contactWay= res.data.mobile
    state.formData.bankName=res.data.bank.name
    state.formData.bankCode=res.data.bank_number
    state.formData.bank_branch = res.data.bank_branch
    bank_id.value = res.data.bank.id
 
  })
}
//弹出银行卡信息
const choosebankName = () => { 
  popupbankListRef.value.open()
}
//------------------ 分类开始-----------------------
const popupbankListRef = ref()
const bank_id = ref()
const bankDataList = ref([])
const bankCurrentPage = ref()
const bankLastPage = ref()
const bankpopList = async (params = null) => {
  const res = await sheep.$api.returned_info.getBankInfo(params);
  bankDataList.value = [...bankDataList.value, ...res?.data.rows];
  bankDataList.value.forEach(item => { 
    item.title = item.name
  })
  bankCurrentPage.value = res.data.current_page;
  bankLastPage.value = res.data.last_page;
}

// 子组件触发的方法将项目title 
const bankSwitchTitle = (data) => {
  state.formData.bankName = data.title
  bank_id.value = data.id
}
const bankpage = ref(1)
const pageBankEvent = () => {
  if (bankCurrentPage.value < bankLastPage.value) {
    bankpage.value += 1;
  } else {
    return;
  }
  let params = {
    page: bankpage.value,
  };
  bankpopList(params);
}
// 搜索列表
const subcomponentSearch = (value) => {
  bankDataList.value = []
  let params = {
    filter: JSON.stringify({
      title: value,
    }),
    op: JSON.stringify({
      title: 'LIKE',
    })
  };
  bankpopList(params);
}
//------------------ 分类结束-----------------------
//提交
const relRef = ref();
const submitForm = async () => {
  const validate = await unref(relRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;
  
  let parpam={
    name: state.formData.realName,
    identity_id: state.formData.identityCard,
    mobile:  state.formData.contactWay,
    bank_id: bank_id.value,
    bank_number: state.formData.bankCode,
    bank_branch: state.formData.bank_branch,
    type:state.formData.payment_type
  }
  console.log(parpam)
  sheep.$api.returned_info.postReturnedAdd(parpam).then((res) => {
    if(res.code == 1){
      sheep.$helper.toast(res.msg);
    setTimeout(function() {
     sheep.$router.back(true)
      }, 500);
        
      }else{
        sheep.$helper.toast(res.msg);
      }
        });
};
//删除
const deletesubmit = ()=>{
  let parpam = {
   ids :editid.value}
sheep.$api.returned_info.getReturnedDel(parpam).then((res) => {
  if(res.code == 1){
    sheep.$helper.toast(res.msg);
    setTimeout(function() {
     sheep.$router.back(true)
      }, 500);
    
  }else{
    sheep.$helper.toast(res.msg);
  }
   
		})
}
//修改
const editsubmit = async() =>{
  const validate = await unref(relRef)
    .validate()
    .catch((error) => {
    });
  if (!validate) return;
  if (state.fileList1 == '') {
		uni.showToast({
			title: '请上传图片',
			icon: 'none',
			duration: 1000
		})
		return false
	}
  let parpam={
    name: state.formData.realName,
    identity_id: state.formData.identityCard,
    mobile:  state.formData.contactWay,
    bank_id: bank_id.value,
    bank_number: state.formData.bankCode,
    bank_branch: state.formData.bank_branch,
    ids:editid.value
  }
  sheep.$api.returned_info.getReturnedEdit(parpam).then((res) => {
    if(res.code == 1){
      sheep.$helper.toast(res.msg);
    setTimeout(function() {
     sheep.$router.back(true)
      }, 500);
        
      }else{
        sheep.$helper.toast(res.msg);
      }
		});
}

</script>

<style scoped lang="scss">
 @import '../compentns/public.scss';
 @import '../compentns/up_sheet.scss';
//  修改内容
.edit_button{
    height: 144rpx;
    width: 90%;
    padding: 0 5%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
    display: flex;
    .del{width: 276rpx;
      height: 90rpx;
border-radius: 50rpx;
border: 2rpx solid $uni-color-primary;
color: $uni-color-primary;
 font-family: PingFangSC;
color: $uni-color-primary;
font-weight: $uni-font-weight;
font-size: 34rpx;}
.edit{
  margin-left: 20rpx;
  width: 454px;
height: 90rpx;
border-radius: 50rpx;
font-family: PingFangSC;
color: #FFFFFF;
font-weight: $uni-font-weight;
font-size: 34rpx;
background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}
}


// 滚动
.comprehensive{
        width: calc(100% - 40rpx);
        background-color: rgba(0, 0, 0, 0);
        margin: 0 20rpx;
        height: 73vh;
}
//图片
.cards {
  width: 100%;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  margin-bottom: 120rpx;
  padding-bottom: 20rpx;
    :deep(.u-upload) {
      margin: 30rpx 0;
      width: 100% !important;
      background: #fff !important;
      .u-upload__wrap{
     
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
      }
      

.uploadimg {
  width: 60rpx;
  height: 48rpx;
}
}

.uploadimg {
  width: 60rpx;
  height: 48rpx;
}
}
:deep(.is-disabled){
  .uni-easyinput__placeholder-class{
    color: $uni-color-primary !important;
  }   

}
//日期
.dates{
text-align: right;
border: #1241E2 1rpx solid;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16rpx;
height: 64rpx;
margin: 15rpx 0 0 200rpx;
image{
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.placeholder{
  color: $uni-color-primary;
  font-weight: 500;
 font-size:$uni-font-size-26;
}
.gray{
  color: #999;
  font-weight: 500;
 font-size:$uni-font-size-26;
}
}
:deep(.uni-data-checklist){
  .checklist-group{
    justify-content: flex-end;
    height: 90rpx;
    .checklist-box.is--default.is-checked.is-disable {
      .radio__inner {
        opacity: 1 !important;
      }
      .checklist-text {
        opacity: 1 !important;
      }
   }
    .checklist-box{
      margin-left: 25rpx !important;
      margin-right: 10rpx !important;
    }
  }
  
}

</style>